window.addEventListener("load", function () {
	//API交互 效果
	//获取后台数据动态渲染
	const apiData = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	//遍历数据进行拼接
	apiData.forEach(function (v) {
		//通过自定义属性data-将数据进行保留
		$(
			"#bannerList"
		).innerHTML += `<li data-price=${v.price} data-unitPrice=${v.unitPrice}>${v.times}</li>`;
	});
	$("#bannerList li")[1].classList.add("active");
	//默认显示第一个 索引内容
	$("#money").innerHTML = `<strong >¥${
		$("#bannerList li")[1].dataset.price
	}</strong>(约  ${
		$("#bannerList li")[1].dataset.unitprice
	}元/次),进线企业实名购买;`;
	//遍历后进行索引下方数据
	//获取 相关节点
	// $("#bannerList") $("#money")
	$("#bannerList li").forEach(function (v, i) {
		v.addEventListener("click", function () {
			if (i >= 1) {
				$("#bannerList li").forEach(function (item, index) {
					item.classList.remove("active");
				});
				this.classList.add("active");
				//点击功能按钮联动下方内容
				$(
					"#money"
				).innerHTML = `<strong >¥${this.dataset.price}</strong>(约  ${this.dataset.unitprice}元/次),进线企业实名购买;`;
			}
		});
	});
	//tab区js动态交互效果
	//获取相关节点
	//    $("#mainNav-list li")$("#mainLt")
	//点击li出现 相关div
	// $("#mainNav-list li").forEach(function (v, i) {
	// 	v.addEventListener("click", function () {
	// 		$("#mainNav-list li").forEach(function (item, index) {
	// 			item.classList.remove("active");
	// 			$("#mainLt div")[index].classList.remove("on");
	// 		});
	// 		//再给自己 增加家伙样式
	// 		this.classList.add("active");
	// 		//通过li的对应索引进行显示对应的卡片
	// 		$("#mainLt div")[i].classList.add("on")
	// 	});
	// });
	tab("#mainNav-list li", "active", "#mainLt div", "on");
	//配置
	const config = {
		selector: "#bannerBg",
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "#000", //点颜色
		stroke: "0,0,0", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);
});
